{extend name="base" /}
{block name="head"}
<meta name="description" content="">
<meta name="keywords" content="">
<title>个人中心</title>
{/block}
{block name="css"}
{css file="/static/css/member/personal.css"}
{/block}
{block name="header"}{include file="public/header" /}{/block}
{block name="main"}
<div class="am-container am-margin-top tr-personal" id="personal">
    <div class="am-u-md-3 am-padding-right-sm">
        <section class="am-panel am-panel-default">
            <input type="hidden" name="uid" id="uid" value="{$uid}">
          <div class="am-panel-bd am-text-center">
            <p class="tr-portrait am-padding-horizontal-lg"><img :src="info.avatar" onerror="javascript:this.src=img_url+'/static/img/portrait.gif'" class="am-img-thumbnail am-circle" />
            </p>
            <p class="am-margin-top-sm">{{ info.user_name }}</p>
            <hr data-am-widget="divider" style="" class="am-divider am-divider-dotted" />
            <p class="am-padding-horizontal"><a href="http://www.sjqcj.com/space/{$uid}" target="_blank" class="am-btn am-btn-primary am-btn-sm am-btn-block am-radius">去TA的微博</a></p>
            <p class="am-margin-top-sm am-padding-horizontal"><a href="{:url('index/tradeCenter')}" class="am-btn am-btn-primary am-btn-sm am-btn-block am-radius">进入交易区</a></p>
          </div>
        </section>
        <section class="am-panel am-panel-default tr-personal-info">
          <div class="am-panel-bd">
            <div class="am-g">
                <div class="am-u-sm-12"><div class="tr-account" :title="info.account">资金账号:&nbsp;&nbsp;{{ info.account }}</div></div>
                <div class="am-u-sm-12">选股成功率:&nbsp;&nbsp;{{ info.success_rate }}</div>
                <div class="am-u-sm-12">周均收益率:&nbsp;&nbsp;{{ info.week_avg_profit_rate }}</div>
                <div class="am-u-sm-12">账户创建:&nbsp;&nbsp;{{ info.time }}</div>
                <div class="am-u-sm-12">最后操作:&nbsp;&nbsp;{{ info.operationTime }}</div>
            </div>
          </div>
        </section>
    </div>
    <div class="am-u-md-9 am-padding-left-sm">
        <div class="am-panel-group">
            <section class="am-panel am-panel-default tr-panel-asset">
                <div class="am-panel-hd">
                    <h2 class="am-panel-title"><span class="am-icon-money am-icon-sm am-icon"></span>资产状况</h2>
                </div>
                <div class="am-panel-bd am-text-center">
                    <div class="am-g tr-asset-content">
                        <div class="am-u-sm-4">总盈利率</div>
                        <div class="am-u-sm-3">总盈利排名</div>
                        <div class="am-u-sm-3">当日盈亏</div>
                        <div class="am-u-sm-2">日盈利率</div>
                        <div class="am-u-sm-4"><span :class="info.total_rate_class">{{ info.total_rate }}</span></div>
                        <div class="am-u-sm-3"><span class="tr-color-win">{{ info.total_profit_rank }}</span></div>
                        <div class="am-u-sm-3"><span :class="info.shares_class">{{ info.shares }}</span></div>
                        <div class="am-u-sm-2"><span :class="info.shares_class">{{ info.shares_rate }}</span></div>
                    </div>
                    <hr class="am-margin-vertical-sm">
                    <div class="am-g tr-asset-content">
                        <div class="am-u-sm-4">总资产</div>
                        <div class="am-u-sm-3">资金余额</div>
                        <div class="am-u-sm-3">股票市值</div>
                        <div class="am-u-sm-2">持仓</div>
                        <div class="am-u-sm-4"><span class="tr-color-price">{{ info.funds }}</span>元</div>
                        <div class="am-u-sm-3"><span class="tr-color-price">{{ info.available_funds }}</span>元</div>
                        <div class="am-u-sm-3"><span class="tr-color-price">{{ market_value }}</span>元</div>
                        <div class="am-u-sm-2"><span class="tr-color-price">{{ info.position }}</span></div>
                    </div>
                </div>    
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd"><h2 class="am-panel-title"><span class="am-icon-line-chart am-icon-sm am-icon"></span>账户盈亏走势图</h2></div>
                <main class="am-panel-bd">
                    <div id="main" style="height: 400px;"></div>
                </main>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd"><h2 class="am-panel-title"><span class="am-icon-database am-icon-sm am-icon"></span>持仓情况</h2></div>
                <main class="am-panel-bd">
                    <table class="am-table am-margin-bottom-0 am-table-centered am-table-hover">
                        <thead>
                            <tr>
                                <th width="20%">股票名称(代码)</th>
                                <th>持仓数量</th>
                                <th>成本价</th>
                                <th>最新价</th>
                                <th>市值</th>
                                <th>盈亏</th>
                                <th>盈亏比例</th>
                                <th width="14%">建仓时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="positions.length > 0">
                                <tr v-for="(item, index) in positions">
                                    <td class="am-text-left"><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.stock_label }}</span></a></td>
                                    <td>{{ item.available_number }}</td>
                                    <td><span class="tr-color-price">{{ item.cost_price }}</span></td>
                                    <td><span class="tr-color-price">{{ item.price }}</span></td>
                                    <td><span class="tr-color-price">{{ item.assets }}</span></td>
                                    <td><span :class="item.ratio_class">{{ item.profit }}</span></td>
                                    <td><span :class="item.ratio_class">{{ item.ratio }}</span></td>
                                    <td><span>{{ item.time }}</span></td>
                                </tr>
                            </template>
                            <template v-else>
                                <tr>
                                    <td colspan="9"><span>暂无数据</span></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </main>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">
                    <h2 class="am-panel-title"><span class="am-icon-file-text am-icon-sm am-icon"></span>交易记录</h2>
                </div>
                <main class="am-panel-bd">
                    <table class="am-table am-margin-bottom-0 am-table-centered am-table-hover">
                        <thead>
                            <tr>
                                <th width="20%">股票名称(代码)</th>
                                <th>方式</th>
                                <th>成交价格</th>
                                <th>成交数量</th>
                                <th>状态</th>
                                <th width="20%">时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="entrust.length > 0">
                            <tr v-for="(item, index) in entrust">
                                <td class="am-text-left"><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.stock_label }}</span></a></td>
                                <td><span :class="item.type_class">{{ item.type_label }}</td>
                                <td>{{ item.price }}</td>
                                <td>{{ item.number }}</td>
                                <td>{{ item.status_name }}</td>
                                <td>{{ item.deal_time }}</td>
                            </tr>
                            </template>
                            <template v-else>
                                <tr>
                                    <td colspan="6"><span>暂无数据</span></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </main>
                <div class="am-panel-footer page" id="entrust-page">
                    <entrust-page :cur.sync="entrust_page.page" :all.sync="entrust_page.page_total" v-on:btn-click="getEntrust"></entrust-page>
                </div>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd"><h2 class="am-panel-title"><span class="am-icon-database am-icon-sm am-icon"></span>历史持仓</h2></div>
                <main class="am-panel-bd">
                    <table class="am-table am-margin-bottom-0 am-table-centered am-table-hover">
                        <thead>
                            <tr>
                                <th width="8%">序号</th>
                                <th width="20%">股票名称(代码)</th>
                                <th>收益率</th>
                                <th>盈亏</th>
                                <th width="18%">买入时间</th>
                                <th width="18%">卖出时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-if="history_positions.length > 0">
                                <tr v-for="(item, index) in history_positions"> 
                                    <td>{{ index+1 }}</td>
                                    <td class="am-text-left"><a :href="item.stock_url" target="_blank" rel="nofollow"><span class="tr-shares-name">{{ item.stock_label }}</span></a></td>
                                    <td><span :class="item.ratio_class">{{ item.ratio }}</span></td>
                                    <td><span :class="item.ratio_class">{{ item.profit }}</span></td>
                                    <td>{{ item.time }}</td>
                                    <td>{{ item.update_time }}</td>
                                </tr>
                            </template>
                            <template v-else>
                                <tr>
                                    <td colspan="6"><span>暂无数据</span></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </main>
                <div class="am-panel-footer page" id="history">
                    <history-page :cur.sync="history.page" :all.sync="history.page_total" v-on:btn-click="getHistoryPositions"></history-page>
                </div>
            </section>
            <!-- <section class="am-panel am-panel-default tr-comments">
                <div class="am-panel-hd"><h2 class="am-panel-title"><span class="am-icon-commenting am-icon-sm am-icon"></span>留言板</h2></div>
                <main class="am-panel-bd">
                    <ul class="am-comments-list tr-comments-list">
                      <li class="am-comment">
                        <a href="#link-to-user-home">
                          <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/96/h/96/q/80" alt="" class="am-comment-avatar" width="48" height="48">
                        </a>
                        <div class="am-comment-main">
                          <div class="am-comment-hd">
                            <div class="am-comment-meta">
                              <a href="#link-to-user" class="am-comment-author am-margin-right">某人</a><time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
                            </div>
                          </div>
                          <div class="am-comment-bd">
                            <p>《永远的蝴蝶》一文，还吸收散文特长，多采用第一人称，淡化情节，体现一种思想寄托和艺术追求。</p>
                          </div>
                        </div>
                      </li>
                      <li class="am-comment">
                        <a href="#link-to-user-home">
                          <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg?imageView/1/w/96/h/96/q/80" alt="" class="am-comment-avatar" width="48" height="48">
                        </a>
                        <div class="am-comment-main">
                          <div class="am-comment-hd">
                            <div class="am-comment-meta">
                              <a href="#link-to-user" class="am-comment-author am-margin-right">路人甲</a><time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-13 0:03</time>
                            </div>
                          </div>
                          <div class="am-comment-bd">
                            <p>感觉仿佛是自身的遭遇一样，催人泪下</p>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div class="am-form">
                        <form class="am-form" action="" method="post">
                            <fieldset>
                                <div class="am-form-group">
                                  <textarea class="" rows="5" id="doc-ta-1"></textarea>
                                </div>
                                <p class="am-text-right"><button type="submit" class="am-btn am-btn-default">留言</button></p>
                            </fieldset>
                        </form>    
                    </div>
                </main>
            </section> -->
        </div>
    </div>
</div>
{/block}

{block name="footer"}{include file="public/footer" /}{/block}
{block name="js"}
{js href="/static/js/widget/echarts.js" /}
{css href="/static/css/public/pagination.css" /}
{js href="/static/js/widget/page.js" /}
{js href="/static/js/member/personal.js" /}
{/block}
